<template>
	<div class="moviepage">
		<div class="movie-info" :style="{'background-color':movie.backgroundColor}">
			<div class="crumbs-nav">
				<a @click="$router.back()">猫眼电影</a>
				&nbsp;>&nbsp;
				<span>{{movie.nm}}</span>
			</div>

			<div class="movie-info-top">
				<div class="movie-cover" @click="path()">
					<!-- <router-link to="/videoshow"> -->
					<img :src="$options.filters.src(movie.img,100.138)" class="img poster">
					<img src="../assets/img/poster-play.png" class="img poster-play">
					<!-- </router-link> -->
				</div>

				<div class="movie-desc">
					<div class="movie-desc-top">
						<div class="movie-cn-name" style="width: 211px;">
							<h1 style="display: inline-block;width: 206px;">{{movie.nm}}</h1>
						</div>

						<div class="movie-en-name">{{movie.enm}}</div>

						<div class="movie-other-info">
							<div class="movie-type">
								<span class="movie-cat">{{movie.cat}}</span>
							</div>
							<div class="actors">
								<span>{{movie.star}}</span>
							</div>
							<div class="movie-show-time">
								<span>{{movie.onlineDate}}</span>
							</div>
						</div>
					</div>

					<router-link class="btns" to="/mine" tag="div">
						<button type="button" class="button">
							<img src="../assets/img/want-to-watch.png" class="img">
							<span>想看</span>
						</button>
						<button type="button" class="button">
							<img src="../assets/img/star.png" class="img">
							<span>看过</span>
						</button>
					</router-link>
				</div>
			</div>

			<div class="brief-introduction">
				<div class="title">
					<span>简介</span>
				</div>

				<div class="content">
					<p class="normal-line">{{movie.dra}}</p>
				</div>
			</div>

			<div class="actors">
				<div class="title">
					<span>演职人员</span>
				</div>

				<div class="actor-list">
					<ul>
						<li class="left-margin" v-for="item in celebrities" :key="item.id">
							<router-link to="">
								<img :src="$options.filters.src(item.avatar,80.112)" :alt="item.cnm" class="img">
								<span class="name">{{item.cnm}}</span>
								<span class="role">{{item.desc}}</span>
							</router-link>
						</li>
					</ul>
				</div>

			</div>

			<div class="videos">
				<div class="title">
					<span>视频推荐</span>
				</div>

				<div class="videos-list">
					<ul>
						<li class="video" v-for="item in feeds" :key="item.id">
							<a @click="pathSec(item)">
								<img :src="item.video.imgUrl" :alt="item.title" class="img bacImg">
								<div class="play">
									<div class="triangle"></div>
								</div>
							</a>
						</li>
					</ul>
				</div>
			</div>

			<div class="photos">
				<div class="title">
					<span>剧照</span>
				</div>
				<div class="photos-list">
					<ul>
						<li class="left-margin" v-for="(item,index) in movie.photos" :key="index">
							<img :src="$options.filters.src(item,140.93)" class="img">
						</li>
					</ul>
				</div>
			</div>
		</div>

		<essay :hotComments="hotComments" v-if="this.hotComments.length>0"></essay>

		<discuss :questions="questions" v-if="this.questions.length>0"></discuss>

		<long-essay :filmReviews="filmReviews" v-if="this.filmReviews.length>0"></long-essay>

		<film-music :movie="movie" v-if="this.movie != null"></film-music>

		<box-office :mbox="mbox.mbox"></box-office>

		<related-informations :newsList="newsList" v-if="this.newsList!=null"></related-informations>

		<related-video :relatedMovies="relatedMovies" v-if="this.relatedMovies.length>0"></related-video>

	</div>
</template>

<script>
	import FilmMusic from "@/components/FilmMusic.vue"
	import Essay from "@/components/Essay.vue"
	import Discuss from "@/components/Discuss.vue"
	import LongEssay from "@/components/LongEssay.vue"
	import RelatedVideo from "../components/RelatedVideo.vue"
	import BoxOffice from '@/components/BoxOffice.vue'
	import RelatedInformations from '@/components/RelatedInformations.vue'
	export default {
		props: [
			"id"
		],
		data() {
			return {
				movieinfo: [],
				movie: null,
				celebrities: null,
				feeds: null,
				mbox: null,
				newsList: null,
				hotComments: [],
				questions: [],
				filmReviews: [],
				relatedMovies: [],
			}
		},
		components: {
			FilmMusic,
			Essay,
			Discuss,
			LongEssay,
			RelatedVideo,
			BoxOffice,
			RelatedInformations
		},
		created() {
			this.getMovieInfo()
		},
		mounted() {

		},
		methods: {
			async getMovieInfo() {
				let re = await this.$axios.get('movie/detail?movieid=' + this.id)
				this.movieinfo = re
				this.movie = re.movie
				this.celebrities = re.celebrities.splice(0, 12)
				this.feeds = re.feedVideos.feeds
				this.mbox = re.mbox
				this.newsList = re.newsList.newsList
				this.hotComments = re.comments.hotComments;
				this.questions = re.questions.questions;
				this.filmReviews = re.filmReviews.filmReviews;
				this.relatedMovies = re.relatedMovies;

				console.log(this.id);
				this.$store.commit('addMovieHistory',re.movie)
				// console.log(this.movieinfo, this.movie, this.celebrities, this.feeds, this.mbox, this.newsListthis,this.hotComments,this.questions, this.filmReviews, this.relatedMovies)
			},

			path() {
				this.$router.push({
					path: "/videoshow",
					query: {
						info: this.feeds,
						Comments: this.hotComments
					}
				})
			},

			pathSec(item) {
				this.$store.commit("RvideoObj",item)
				this.$router.push({path: "/relatedvideos"});
			},

		},
		filters: {
			src(value, c) {
				return value.replace('w.h', c)
			}
		},
	}
</script>

<style scoped lang="less">
	.movie-info {
		padding: 21px 16px;
		color: #fff;
		position: relative;

		.crumbs-nav {
			margin-bottom: 15px;
			color: #ccc;
		}

		.movie-info-top {
			overflow: hidden;
			display: flex;
			justify-content: flex-start;
		}

		.movie-cover {
			float: left;
			height: 138px;
			width: 100px;
			position: relative;
			flex-shrink: 0;

			.poster {
				height: 138px;
				width: 100%;
				background: none;
			}

			.poster-play {
				height: 30px;
				width: 30px;
				position: absolute;
				bottom: 0;
				left: 0;
				background: none;
			}
		}

		.movie-desc {
			flex-grow: 1;
			margin-left: 12px;
			display: flex;
			flex-flow: column;
			justify-content: space-between;
			overflow: hidden;

			.movie-desc-top {
				display: flex;
				flex-flow: column;
				justify-content: flex-start;
				flex-grow: 1;
			}

			.movie-cn-name {
				font-size: 20px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-weight: 700;

				h1 {
					font-size: 20px;
					margin: 0;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-weight: 700;
				}
			}

			.movie-en-name {
				font-size: 12px;
				opacity: .6;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.movie-other-info {
				display: flex;
				flex-grow: 1;
				flex-flow: column;
				justify-content: center;
			}

			.movie-type {
				font-size: 12px;
				display: flex;
				align-items: center;

				.movie-cat {
					opacity: .6;
				}
			}

			.actors {
				opacity: .6;
				font-size: 12px;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				margin: 0;
			}

			.movie-show-time {
				span {
					opacity: .6;
					font-size: 12px;
				}
			}

			.btns {
				display: flex;
				justify-content: space-between;

				.button {
					display: flex;
					justify-content: center;
					align-items: center;
					background: hsla(0, 0%, 100%, .35);
					box-shadow: 0 1px 4px 0 rgb(0 0 0 / 10%);
					border-radius: 4px;
					font-size: 14px;
					width: 47.61904762%;
					height: 30px;
					color: #fff;

					img {
						background: 0;
						width: 14px;
						height: 14px;
						margin-right: 11px;
					}
				}
			}
		}

	}

	.brief-introduction {
		position: relative;
		padding: 16px 0 0;

		&>.title {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&>span {
				font-size: 15px;
			}
		}

		&>.content {
			font-size: 15px;
			line-height: 26px;
			overflow: hidden;

			p.normal-line {
				word-wrap: break-word;
				word-break: break-all;
			}
		}

		&::after {
			content: "";
			display: table;
		}
	}

	.actors {
		margin: 18px 0 15px;

		.title {
			font-size: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.actor-list {
			margin-top: 11px;

			ul {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				overflow-x: scroll;

				li {
					flex-shrink: 0;

					&.left-margin {
						margin-left: 6px;
					}

					&>a {
						display: flex;
						flex-flow: column;
						justify-content: center;
						align-items: center;
						width: 82px;

						img {
							width: 80px;
							height: 112px;
							display: block;
							background: none;
						}

						.name,
						.role {
							font-size: 12px;
							text-overflow: ellipsis;
							white-space: nowrap;
							overflow: hidden;
							width: 100%;
							text-align: center;
						}

						.role {
							opacity: .6;
						}
					}
				}

				&:first-child {
					margin-left: 0;
				}
			}
		}
	}

	.videos {
		margin-top: 18px;

		.title {
			font-size: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.videos-list {
			margin-top: 11px;

			ul {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				overflow-x: scroll;

				li {
					flex-shrink: 0;
					display: flex;
					flex-flow: column;
					justify-content: center;
					align-items: center;
					margin-left: 8px;

					.bacImg {
						width: 140px;
						height: 93px;
						border-radius: 8px;
						background: rgba(0, 0, 0, .7);
					}

					&.video>a {
						display: flex;
						justify-content: center;
						align-items: center;
						position: relative;

						.play {
							position: absolute;
							top: 30.5px;
							left: 54px;
							box-sizing: border-box;
							width: 32px;
							height: 32px;
							background: hsla(0, 0%, 100%, .9);
							box-shadow: 0 0 2px 0 rgb(0 0 0 / 30%);
							border-radius: 16px;

							.triangle {
								position: absolute;
								width: 0;
								height: 0;
								border-color: transparent transparent transparent #222;
								border-style: solid;
								border-width: 6px 9px;
								top: 10px;
								left: 13px;
							}
						}
					}


				}
			}
		}
	}

	.photos {
		margin-top: 18px;

		.title {
			font-size: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.photos-list {
			margin-top: 11px;

			ul {
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				overflow-x: scroll;

				li {
					flex-shrink: 0;
					display: flex;
					flex-flow: column;
					justify-content: center;
					align-items: center;

					&.left-margin {
						margin-left: 8px;
					}

					img {
						width: 140px;
						height: 93px;
					}
				}
			}
		}
	}

	a {
		color: inherit;
		display: inline;
	}

	button {
		border: none;
		margin: 0;
		padding: 0;
		outline: none;
		background-color: transparent;
	}

	.img {
		border: 0;
		display: inline-block;
		background: #f5f5f5 url(../assets/img/下载.png) no-repeat 50%;
		background-size: 50%;
	}
</style>
